import React,{useState,useEffect} from 'react'
import style from './style.module.scss'
//导入redux
import {useDispatch,useSelector} from 'react-redux'
//actions--reducers 
import {setUser,deleteuser} from '../../store/reducers/user'
//跳转网页
import {useNavigate} from 'react-router-dom'
export default function Login() {
  //定义输入的信息
  const [user,setUsername] = useState('')
  const [pwd,setPwd] = useState('')
  const navigate = useNavigate()
  //redux-dispatch 
  const dispatch = useDispatch();
  function login(){
    console.log(user,pwd);
    if(user=='' || pwd ==''){
        alert('账号密码不能为空');//模拟了 antd-mobile组件实现 
        return;
    }
    let obj={
      username:user,
      token:'xxkkshdh373ndfjdj',
      isLogin:true
    }
    dispatch(setUser(obj));
    localStorage.setItem('user',JSON.stringify(obj))
    //跳转网页a
    navigate(-1);
  }
  return (
    <>
      <div className={style.top}>宜居</div>
      <div className={style.login}>
        <div className={style.inputs}>
          <input type="text" placeholder="请输入账号" value={user} onChange={(e)=>setUsername(e.target.value)} />
          <br />
          <input type="text" placeholder="请输入密码" value={pwd} onChange={(e)=>setPwd(e.target.value)}/>
        </div>
        <div className={style.but} onClick={login}>登录</div>
      </div>
    </>
  )
}
